<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery无限滚动插件</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />  <!-- 此处引用的为下面的 Css 代码 -->
</head>
<style>
body{
    font-family: Arial;
}
body,ul,li{ 
    margin:0; 
    padding:0;
}
ul,li,img{
    list-style: none;
}
.title{
    width: 100%;
    text-align: center;
}
.xbox,.ybox{
    overflow: hidden;
    margin: 20px auto;
    padding: 5px;
    border: 2px solid #DDD;
}
.xbox{
    width: 500px;
    height: 50px;
}
.xbox ul li{
    float: left;
    margin-right: 5px;
}
.xbox ul li a, .ybox ul li a{
    display: block;
    width:100px;
    height: 50px;
    box-shadow: 0 0 40px rgba(0,0,0,0.2) inset;
    text-decoration: none;
    color: gray;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
}
.ybox{
    width: 100px;
    height: 250px;
}
.ybox ul li{
    margin-bottom: 5px;
}
</style>
<body>
    <h3 class="title">jQuery无限滚动插件</h3>

    

    <div class="ybox">
        <ul>
            <li><a href="#">y</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </div>

<script type="text/javascript" src="../lib/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/newscrool.js"></script> <!-- 此处引用的为上面的插件实现代码 -->
<script type="text/javascript">
    $(function () {        
        $(".xbox").scroll(); //默认横向滚动
        $(".ybox").scroll({ direction: "y" }); //设置为纵向滚动
    });
</script>
</body>
</html>